<div *ngFor="let group of variableGroups;trackBy: trackById;" class="optionPanel farris-form-controls-inline my-2">
  <div class="f-section-header">
    <div class="f-title ng-star-inserted">
      <h4 class="f-title-text">{{group.id}}</h4>
    </div>
  </div>
  <div class="farris-group-wrap">
    <variable-list-item [item]="item" [presetTypes]="group.presetTypes" [schemaFields]="schemaFields"
      (itemChanged)="onVariableItemChanged($event)" (itemRemoved)="removeItem($event)" (moveUpItem)="moveUp($event)"
      (moveDownItem)="moveDown($event)" (click)="selectItemChanged(item)"
      *ngFor="let item of group.items;trackBy:trackByItemId;" [class.active]="item === selectItem">
    </variable-list-item>
  </div>
  <div *ngIf="group.canAdd" class="variable-group-footer">
    <button class="btn btn-link btn-icontext" type="button" (click)="addItem(group.id);">
      <span class="f-icon f-icon-add"></span>新增
    </button>
  </div>
</div>